<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>双辉旅程网注册账号</title>
		<link rel="stylesheet" type="text/css" href="/front/css/headfoot.css"/>
		<link rel="stylesheet" type="text/css" href="/front/css/register.css"/>
	</head>
	<body>
		<!--顶部开始-->
		<header>
			<div id="reg-header">
				<div class="reg-header-middle">
					<div class="reg-header-left">
						<a href={php} echo url('/web/index','','','www') {/php} title="首页">
							<i></i>
							<span class="reg-shsy">双辉旅程网</span>
						</a>
						<span class="wel-reg">欢迎注册</span>
					</div>
					<div class="reg-header-right">
						<span class="exist-num">已有账号，</span>
						<span class="please-login"><a href="/user/login">请登录</a></span>
					</div>
				</div>
			</div>
		</header>
		<!--顶部结束-->
		<!--内容表单注册部分开始-->
		<article>
			<div id="reg-form-box">
				<form action="" method="post" id="registerform">
					<div class="reg-form">
						<div class="reg-form-input">
							<label for="">手机号<span id="phoneerror"></label>
							<div class="">
								<input type="text" name="phone" value="{$b['phone']}"  placeholder="请输入手机号码"/>
							</div>
						</div>
						<div class="reg-form-input reg-img-code">
							<label for="">图形验证码<span id="codeerror"></label>
							<div class="">
								<input type="text" name="imgCode" value="{$b['imgCode']}"  placeholder="请输入验证码"/>
								<img  id="captcha_img" onclick="this.src='{:captcha_src()}?d='+Math.random();" alt="点击更换" title="点击更换" src="{:captcha_src()}" class="m">
							</div>
						</div>	
						<div class="reg-form-input reg-mobile-code">
							<label for="">手机校验码<span id="phone_codeerror"></label>
							<div class="">
								<input type="text" name="phone_code" value="{$b['phone_code']}"  class="import-mob-code" placeholder="请输入手机校验"/>
								<input type="button"  id="phone_codea" value="获取手机验证码" class="get-mob-code" />
							</div>
						</div>	
						<div class="reg-form-input">
							<label for="">设置密码<span id="passworderror"></span></label>
							<div class="">
								<input type="password" name="password"  placeholder="请设置密码"/>
							</div>
						</div>	
						<div class="reg-form-input">
							<label for="">确认密码<span id="repasswprderror"></span></label>
							<div class="">
								<input type="password" name="repassword"  placeholder="请再次输入密码"/>
							</div>
						</div>	
						<div class="reg-protocol">
							<input type="checkbox" checked name="accepted" id="accepted"  value="1"/>
							<span>我已阅读并同意</span>
							<span><a href="/about/agreement">《双辉旅程网服务协议》</a></span>
							<span id="acceptederror" style="color: red;"></span>
						</div>
						<div class="reg-butoon">
						<button  id="aa" type="submit">立即注册</button>
						</div>
					</div>
				</form>
			</div>
		</article>
		<!--内容表单注册部分结束-->
	<script type="text/javascript" src="/jquery.js"></script>
	<script src="/front/js/js.js"></script>
	<script type="text/javascript">
	      $(document).ready(function(){
	        //提交表单
	        $("#aa").click(function(){
	        $("#registerform").attr('action','/user/saveuser');
	        $("#registerform").submit();
	          });

	        });  
	</script>
	<script type="text/javascript">
		//发送手机验证码
		$(document).ready(function(){
		    $("#phone_codea").click(function(){
		     	$.post("/user/sendcode?"+Math.random(),
			       {

			       },function(data){

			       },"json");
		     })
		});
	</script>

	<script type="text/javascript">
    	$(function(){
    		//账号验证
    		$("input[name='phone']").blur(function(){
    			var phone = $('input[name="phone"]').val();
    			//不能为空
    			if(!$.trim(phone)) {
					$("input[name='phone']").css({border: "1px solid red"});
					$("#phoneerror").html("请输入账号即手机号");
					return false;
    			}
    			//手机号格式是否满足
    			if((/^1[3|4|5|7|8]\d{9}$/.test(phone)) || (/(^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$)|(^$)/.test(phone))){
					//手机是否注册过
					$.get('/user/checkphone?phone='+$("input[name='phone']").val(),function(data) {
						$("input[name='phone']").css({border: "1px solid green"});
						$("#phoneerror").html("");
						if (data===1) {
							$("input[name='phone']").css({border: "1px solid red"});
							$("#phoneerror").html("手机号已注册,请登录");
						}
					});
    			}else {
					$("input[name='phone']").css({border: "1px solid red"});
					$("#phoneerror").html("格式不正确");
					return false;
    			}
    		});
    		//图片验证码验证
    		$('input[name="imgCode"]').keyup(function(){
    			var imgCodele = $('input[name="imgCode"]').val().length;
    			if (imgCodele>3) {
    				var imgCode = $('input[name="imgCode"]').val();
    			//不能为空
    			if(!$.trim(imgCode)) {
					$("input[name='imgCode']").css({border: "1px solid red"});
					$("#codeerror").html("请输入验证码");
					return false;
    			}else {
    				$.get('/user/checkcode?imgCode='+$("input[name='imgCode']").val(),function(data) {
						$("input[name='imgCode']").css({border: "1px solid green"});
						$("#codeerror").html("");
						if (data===0) {
							$("input[name='imgCode']").css({border: "1px solid red"});
							$("#codeerror").html("验证码错误");
						}
					});
    				}
    			}
 			})	
    		//手机验证码验证
    		$('input[name="phone_code"]').blur(function(){
    			var phone_code = $('input[name="phone_code"]').val();
    			//不能为空
    			if(!$.trim(phone_code)) {
					$("input[name='phone_code']").css({border: "1px solid red"});
					$("#phone_codeerror").html("请输入手机校验码");
					return false;
    			}else{
    				$("input[name='phone_code']").css({border: "1px solid green"});
					$("#phone_codeerror").html("");
    			}
    		});
    		//设置密码验证
    		$("input[name='password']").blur(function(){
    			var password = $('input[name="password"]').val();
    			//不能为空
    			if(!$.trim(password)) {
					$("input[name='password']").css({border: "1px solid red"});
					$("#passworderror").html("请输入密码");
					return false;
    			}else{
    				$.get('/userforgotpwd/checkpassword?password='+$("input[name='password']").val(),function(data) {
						$("input[name='password']").css({border: "1px solid green"});
						$("#passworderror").html("");
						if (data===0) {
							$("input[name='password']").css({border: "1px solid red"});
							$("#passworderror").html("密码应为6~16位的字母和数字组合");
						}
					});
    			}
    		});
    		//确认密码验证
    		$('input[name="repassword"]').blur(function(){
    			var repassword = $('input[name="repassword"]').val();
    			var password = $('input[name="password"]').val();
    			//不能为空
    			if(!$.trim(repassword)) {
					$("input[name='repassword']").css({border: "1px solid red"});
					$("#repasswprderror").html("请重新输入密码");
					return false;
    			}else {
    				if (password===repassword) {
    					$("input[name='repassword']").css({border: "1px solid green"});
						$("#repasswprderror").html("");
    				}else{
    					$("input[name='repassword']").css({border: "1px solid red"});
						$("#repasswprderror").html("密码不一致");
    				}
    			}
    		})
    		//同意协议
  			//var oBox= document.getElementById('accepted');
			// oBox.onclick =function(){
			//     if(this.checked){
			//     	$("#acceptederror").html("");    
			// 	}else{
			// 	    $("#acceptederror").html("请同意双辉旅程网服务协议");
			// 		return false;
			// 	}
			// }
			//
			// $("#accepted").click(function(){
			// 	alert($(this).val());
			//     if($(this).val()!==1){			    	
			//       $("#acceptederror").html("");
			      
			//     }else{
			//       $("#acceptederror").html("请同意双辉旅程网服务协议");
			//       return true;
			//     }
			// });
    		
    	})
    </script>
		<!--公共底部开始-->
		{include file='./base/footer'}
		<!--公共底部结束-->
	</body>
</html>
